<template>
  <div class="banner">
    <div class="top">
        <img class="img1" src="https://gw.alicdn.com/imgextra/i4/O1CN01r4nD6E1dwRo3w4blr_!!6000000003800-2-tps-178-208.png_.webp" alt="">
        <h5>{{conent[count].h5s}}</h5>
        <span>{{conent[count].msg}}</span>
        <img class="img2" src="https://gw.alicdn.com/imgextra/i1/O1CN01WTCMGR23mXG2G7cbi_!!6000000007298-2-tps-96-42.png_.webp" alt="">
    </div>
    <div class="bans">
        <van-swipe :autoplay="4000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images1" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data() {
        return {
            images: [
                'https://gw.alicdn.com/imgextra/i3/O1CN01A8mwgm278vVgtm0dF_!!6000000007753-2-tps-332-430.png_.webp',
                'https://gw.alicdn.com/imgextra/i2/O1CN016ktQmW1tbPWD7aJCd_!!6000000005920-2-tps-750-970.png_.webp',
                'https://gw.alicdn.com/imgextra/i3/O1CN01mOi83y21ObMzfgXbr_!!6000000006975-2-tps-750-970.png_.webp',
                'https://gw.alicdn.com/imgextra/i4/O1CN01Obc5ow1RcxcS9l9Pu_!!6000000002133-2-tps-750-970.png_.webp',
            ],
            images1: [
                'https://gw.alicdn.com/imgextra/i3/O1CN01mOi83y21ObMzfgXbr_!!6000000006975-2-tps-750-970.png_.webp',
                'https://gw.alicdn.com/imgextra/i4/O1CN01Obc5ow1RcxcS9l9Pu_!!6000000002133-2-tps-750-970.png_.webp',
                'https://gw.alicdn.com/imgextra/i3/O1CN01A8mwgm278vVgtm0dF_!!6000000007753-2-tps-332-430.png_.webp',
                'https://gw.alicdn.com/imgextra/i2/O1CN016ktQmW1tbPWD7aJCd_!!6000000005920-2-tps-750-970.png_.webp',
                
            ],
            conent:[
                { h5s: "探物Friday", msg:"探索全球灵感好物 每周五更新"},
                { h5s: "品牌发现号", msg: "解密品牌背后的故事 每周三更新" },
                { h5s: "全球开眼", msg: "开眼全球风向趋势 每周一更新" },
                { h5s: "Dr.质帮你选", msg: "品质联盟真实评测 每周日更新" },
            ],
            count:0
        };
    },
    mounted(){
        setInterval(()=>{
            this.count++
            if(this.count==4){
                this.count=0
            }
        },4000)
    }
}
</script>

<style scoped>
.banner{
    width: 100%;
    box-sizing: border-box;
    padding: 5px 3%;
}
.top{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top .img1{
    width: 38px;
    height: 44px;
}
.top h5{
    width: 63px;
    font-size:12px ;
    color: #fff;
    margin-left: 5px;
    min-width: 40px;
}
.top span{
    width: 190px;
    font-size: 12px;
    margin-left: 5px;
    border-left: 1px solid #f5f5f5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding-left: 2px;
    color: rgb(255, 255, 255);
    font-weight: 400;
}
.top .img2{
    width: 19.45px;
    height: 8.53px;
    margin: 7px 10px;
}

.bans{
    display: flex;
    justify-content: space-between;
}
.van-swipe{
    width: 165px;
    height: 213px;
    overflow: auto;
    border-radius: 10px;
}
.van-swipe-item img{
    width: 165px;
    height: 213px;
}
</style>